<template>
  <div class="user-center">
    <!--<h1>{{name}}</h1>-->
    <div class="container">
      <div class="head_img">
        <img src="../assets/loveread.png" class="xin_img"/>
      </div>
      <div class="input">
        <div>
          <input type="text" class="input_a" id="input_a" placeholder="请输入账号" v-model="input_a">
        </div>
        <div>
          <input type="password" name="password" class="input_a" id="input_p" placeholder="请输入密码" v-model="input_p">
        </div>
        <div>
          <input type="password" name="password" class="input_a" id="input_p2" placeholder="请再次输入密码" v-model="input_p2">
        </div>
      </div>
      <!--<router-link tag="div" class="mine" >-->
      <div class="btn" id="btn" v-on:click="test()">
        <button class="login_btn gray" id="login_btn" disabled="disabled" >
          <img src="../assets/register.png" class="login_img">
        </button>
      </div>
      <!--</router-link>-->
      <div class="go_register">
        <a v-on:click="go_login()">已有帐号，去登录</a>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Vue from 'vue'
  import VueResource from 'vue-resource'
  Vue.use(VueResource)

  export default {
    data() {
      return {
        name: '音乐吧'
      }
    },
    methods: {
      register() {
        let account = this.input_a
        let password = this.input_p
        let password2 = this.input_p2
        console.log(account)
        console.log(password)
        console.log(password)
        if (password !== password2) {
          alert('两次密码不一致')
        } else {
          if (account === '888' && password === '888') {
            alert('注册成功')
            this.$router.push({path: '/login'})
          } else {
            alert('注册失败')
          }
        }
      },
      go_login() {
        this.$router.push({path: '/login'})
      },
      // test为动态登录
      test() {
        let account = this.input_a
        let password = this.input_p
        let password2 = this.input_p2
        this.$http.post('http://127.0.0.1:3000/register', {
          'account': account,
          'password': password,
          'two_password': password2
        }, {emulateJSON: true}).then((response) => {
          console.log(response.body)
          console.log(account)
          if (response.body) {
            console.log('注册成功')
            this.$router.push({path: '/login'})
          } else {
            console.log('注册失败')
          }
        }, (response) => {
          console.log('注册失败')
          // 响应错误回调
        })
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .user-center
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 100;
    width: 100%;
    /*background: #222;*/
    text-align: center;
    h1
      width: 100%;
      height: 80px;
      line-height: 80px;
      text-align: center;
      font-size: 25px;
      font-family: STHupoi;
      color: #26a2ff;
      margin-bottom: 30px;
    .head_img
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background-color: #26a2ff;
      border: solid 2px #26a2f0;
      margin-top: 20%;
      margin-left: auto;
      margin-right: auto;
      line-height: 80px;
      color: #fffef9;
      .xin_img
        height: 60px;
        width: 60px;
        margin-top: 8px;
        border-radius: 10%;
    .input
      width: 80%;
      height: 200px;

      margin-left: auto;
      margin-right: auto;
      margin-top: 24px;
      .input_a
        border-bottom: 1px solid #26a2f0;
        width: 95%;
        margin-left: auto;
        margin-right: auto;
        height: 40px;
        margin-top: 26px;
        padding-left: 10px;
        font-size: 15px;
        color: gray;
        float: left;
        position: relative;
        border-color: #26a2f0;
        border-radius: 10px;
        border-width: 1px;
    .btn
      width: 80%;
      left: 0;
      right: 0;
      margin-left: auto;
      margin-right: auto;
      .login_btn
        width: 100%;
        height: 50px;
        background-color: #26a2f0;
        border-radius: 50px;
        margin-top: 50px;
        border: solid #26a2f0 2px;
        .login_img
          height: 40px;
    .go_register a
      display: inline-block;
      color: rgba(38,162,249,0.78);
      margin-top: 10px;
</style>
